<template>
  <div class="financialSharing singup">
    <div class="singup_info">
      <el-form :model="signupForm" ref="signupRef" :rules="rules" >
        <el-form-item class="singup_item phone"  prop="phone">
          <el-input
            placeholder="账号"
            v-model="signupForm.phone">
          </el-input>
        </el-form-item>
        <el-form-item class="singup_item password" prop="password">
          <el-input
            placeholder="密码"
            type="password"
            v-model="signupForm.password"
            readonly onfocus="this.removeAttribute('readonly');">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="zc" @click="signupSystem"></div>
      <div class="to-register" @click="toLogin"></div> 
    </div>
  </div>
</template>
<script>

/*
  * TODO: 代码注释
  *
  * 修改代码时，请对修改的代码添加注释;
  *
  * 谢谢谢谢谢！！！
  *
* */

import { Message } from 'element-ui'
export default {
  data() {
    return {
      // 注册人员类型  默认4，， 1. admin  ,2 teacher ,3 student ,4 freeUser
      PERSONNEL_TYPE_FREE_USER: 1,
      // 登录表单
      signupForm: {
        // 手机号
        phone: '',
        // 密码
        password: '',
      },
      rules: {
        phone: [
          { validator: this.formVerification, trigger: 'blur' },
        ],
        password: [
          { validator: this.formVerification, trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    // 注册
    signupSystem() {
      const signupForm = this.signupForm;
      // 进行表单验证
      this.$refs.signupRef.validate((valid) => {
        // 表单验证是否通过
        if (!valid) return;
        // 注册所需参数
        const datas = {
          name: signupForm.name,
          phone: signupForm.phone,
          password: signupForm.password,
          // type: this.PERSONNEL_TYPE_FREE_USER,
        };
        // 注册通讯开启
        this.$apis.register(datas).then((res) => {
          if (res.code) {
            Message.success(`${res.message} , 两秒后跳转到登录页面。`)
            // 开启定时器 两秒后跳转到登录页面
            setTimeout(() => {
              this.$router.push('/login')
            }, 2000)
          } else {
            // 提示语
            Message.error(res.message)
          }
        })
      })
    },
    // 表单验证
    formVerification(rule, value, callback) {
      // phone 正则
      const PHONE_REGULAR = /^1[3|4|5|7|8][0-9]\d{8}$/

      // phone 验证
      if (rule.field === 'phone') {
        if (!value) {
          return callback(new Error('手机号不能为空'))
        }
        // phone 正则验证
        if (PHONE_REGULAR.test(value)) {
          callback()
        } else {
          return callback(new Error('手机号码格式不正确'))
        }
      }
      // 密码验证
      if (rule.field === 'password') {
        if (!value) {
          return callback(new Error('密码不能为空'))
        }
      }
      callback()
    },
    //登录
    toLogin(){
      this.$router.push({
        path:'/login'
      });
    },
  },

}
</script>

<style lang="scss">
  .singup {
    background-image: url(../assets/img/finance/signup.jpg);
    background-size: cover;
  }
  .singup_info{
    width: 304px;
    height: 295px;
    position: absolute;
    top: 438px;
    left: 1352px;
  }
  .singup_info .singup_item .el-input__inner{
    background-color: rgba(0, 0, 0, 0);
    font-size: 15px;
    color: #0cb9c9;
    border: none;
  }
  .singup_info .phone .el-input__inner{
    height: 58px;
  }
  .singup_info .password .el-input__inner{
    height: 60px;
  }
  .singup_info .singup_item .el-form-item__error{
    color: #ffffff;
    top: 55px;
    left: 13px;
  }
  .singup .zc{
    width: 295px;
    height: 58px;
    margin-left: 5px;
    cursor: pointer;
    margin-top: 40px;
  }
  .singup .to-register{
    width: 140px;
    height: 18px;
    margin-top: 18px;
    cursor: pointer;
    margin-left: 158px;
  }
  .singup .el-form-item{
    margin-bottom: 44px;
  }
  .singup .el-form-item:last-child{
    margin-bottom: 0px;
  }
</style>
